import React, { useEffect, useRef } from "react";
import styles from "./App.less";
import { Button } from "antd";
import Teditor from "./componetns/teditor";

function App() {
  const editorRef: any = useRef(null);

  useEffect(() => {
    setTimeout(() => {
      editorRef.current.editor.commands.setContent(
        // "<div> 这是新版公式：<formula>\\xrightarrow{一定条件}{\\ } \\xrightarrow{浓硫酸}{170\\celsius}</formula></div> "
        ""
      );
    }, 500);
  }, []);

  const submit = () => {
    const html = editorRef.current.editor.getHTML();
    const res = JSON.stringify(html);
    const finalRes = res.substring(1, res.length - 1);
    console.log(finalRes);
  };

  return (
    <div className={styles.App}>
      <div className={styles.demo}>
        <Teditor ref={editorRef} />
        <div className={styles.submit}>
          <Button type="primary" onClick={submit}>
            提交
          </Button>
        </div>
      </div>
    </div>
  );
}

export default App;
